<template>
    <div class="teamplate-current">
        <div class="container-fluid">
            <div class="row h-query">
                <form class="form-inline">
                    
                    <div class="form-group">
                        <label class="">药品类别</label>
                        <input type="text" class="form-control memberName input-group-sm"  placeholder="请输入关键字" v-model="spbh">
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-default" @click="query">查询</button>
                    </div>                    
                </form>
            </div>
            <div class="row">
                <div class="list-table">
                    <div class="table-wrap">
                        <div class="table-box"  >
                            <table class="table table-striped tc ">
                                <tbody >
                                    <tr>
                                        <th style="text-align:left;">商品编号</th>
                                        <th style="text-align:left;">商品名称</th>
                                        <th style="text-align:left;">商品规格</th>
                                        <th style="text-align:right;">数量</th>
                                        <th style="text-align:right;">应收金额</th>
                                        <th style="text-align:right;">实收金额</th>
                                        <th style="text-align:right;">零售价</th>
                                        <th style="text-align:right;">金额</th>
                                        <th style="text-align:right;">税额</th>
                                        <th style="text-align:right;">成本金额</th>
                                        <th style="text-align:right;">毛利</th>
                                        <th style="text-align:left;">场地</th>
                                    </tr>
                                    <tr v-for="(item,index) in list">
                                        <td style="text-align:left;">{{item.spbh}}</td>
                                        <td style="text-align:left;">{{item.spmch}}</td>
                                        <td style="text-align:left;">{{item.shpgg}}</td>
                                        <td style="text-align:right;">{{item.shl | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.ysje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.sshje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.lshj | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.je | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.she | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.chbje | formatPrice}}</td>
                                        <td style="text-align:right;">{{item.ml | formatPrice}}</td>
                                        <td style="text-align:left;">{{item.shpchd}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="pager-box clearfix pt15">
                            <div class="pull-left">共计
                                <span class="blue">{{count}}</span>条信息 
                                </div>
                                <div class="pull-right">
                                    <div id="pagenav" class="tcdPageCode"></div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import bus from "../api/eventBus";
    import {setUi, setpopPerfect } from "../vuex/actions"; import {ui, popPerfect } from "../vuex/getters";
    export default {
        components: {},
        data() {
            return {
                spbh: '',
                list: [],
                count: 0,
                pagCount: 0
            };
        },
        methods: {
            query() {
                console.log(this.spbh);
                this.$http.get(this.cfg.api+'/PosMxlsController/selectDRYPXSHZ', {
                    params: {
                        page: 1,
                        rows: 20,
                        fdbs: 'mma',
                        spbh: this.$data.spbh
                    }
                }).then(response=> {
                    // console.log(response.body.data.zs);
                    this.$data.count = response.body.data.count;
                    this.$data.pagCount = response.body.data.pagCount;
                    this.$data.list = response.body.data.zs;
                }, response=> {
                    console.log(response.body);
                });
            }
        },
        watch: {},
        vuex: {
            getters: {
                ui,
                popPerfect
            },
            actions: {
                setUi,
                setpopPerfect
            }
        },
        mounted() {
            let user = JSON.parse(sessionStorage.getItem("user"));

            if (!user) {
                router.push({
                    path: "/login"
                });
                return;
            }



        }
    };
</script>
<style>
    .everyWeekDay .weekday,
    .everyDay .days {
        /*解决span不支持width属性*/
        display: -moz-inline-box;
        display: inline-block;
        margin: 5px 0 0 20px;
        text-align: center;
        width: 20px;
        border: 1px solid #f7f7f7;
        cursor: pointer;
    }
    .marginTop {
        margin-top: 5px;
    }
    .selectStyle {
        padding-left: 10px;
        border: none;
        border-radius: 3px;
        outline: none;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        margin: 0 10px 0 10px;
        width: 60px;
        border-color: #0fb9ef;
        color: #0fb9ef;
    }
    .tcdPageCode {
        padding: 5px 20px;
        text-align: left;
        color: #ccc;
        text-align: center;
    }
    
    .tcdPageCode a {
        display: inline-block;
        color: #428bca;
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        border: 1px solid #ddd;
        margin: 0 2px;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .tcdPageCode a:hover {
        text-decoration: none;
        border: 1px solid #428bca;
    }
    
    .tcdPageCode span.current {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #fff;
        background-color: #428bca;
        border: 1px solid #428bca;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .tcdPageCode span.disabled {
        display: inline-block;
        height: 25px;
        line-height: 25px;
        padding: 0 10px;
        margin: 0 2px;
        color: #bfbfbf;
        background: #f2f2f2;
        border: 1px solid #bfbfbf;
        border-radius: 4px;
        vertical-align: middle;
    }
    
    .biaoti {
        display: inline-block;
        padding: 6px 12px;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        border: 1px solid transparent;
        border-radius: 4px;
        border: 1px solid rgb(149, 159, 194);
    }
</style>